<template>
  <div>
    <el-dialog
      title="网格详情"
      top="3%"
      :visible.sync="visible"
      :before-close="modalClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
      size="small"
    >
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24">
          <el-table
            v-loading="loading"
            element-loading-text="数据加载中..."
            :data="dataList"
            :show-header="false"
            :cell-style="cellStyle"
            border
            size="mini"
            style="width: 100%; margin-top: -3%;"
          >
            <el-table-column
              prop="label"
              width="200"
            />
            <el-table-column
              prop="value"
            />
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'GridDetail',
  props: {
    paramsDetail: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data: () => {
    return {
      loading: false,
      dataList: []
    }
  },
  mounted() {
    this.getDetail()
  },
  created() {

  },
  methods: {
    getDetail() {
      this.detailObj = {}
      this.detailObj = { ...this.paramsDetail }
      console.log('detailObj:', this.detailObj)
      if (this.detailObj.length !== 0) {
        this.dataList.push(
          {
            label: '网格id',
            value: this.detailObj.id
          },
          {
            label: '上级网格',
            value: this.detailObj.parentName
          },
          {
            label: '网格名称',
            value: this.detailObj.name
          },
          {
            label: '所属部门',
            value: this.detailObj.deptName
          },
          {
            label: '网格层级',
            value: this.detailObj.level
          },
          {
            label: '所属省',
            value: this.detailObj.province
          },
          {
            label: '所属市',
            value: this.detailObj.city
          },
          {
            label: '所属区县',
            value: this.detailObj.county
          },
          {
            label: '经度',
            value: this.detailObj.longitude
          },
          {
            label: '纬度',
            value: this.detailObj.latitude
          },
          {
            label: '排序',
            value: this.detailObj.orderNum
          },
          {
            label: '部门路径',
            value: this.detailObj.fullPathText
          }
        )
      } else {
        this.dataList = []
      }
    },
    cellStyle(event) {
      if (event.columnIndex === 0) {
        return 'background: #f9fafc'
      }
    },
    modalClose() {
      this.$emit('update:visible', false) // 直接修改父组件的属性
    }
  }
}
</script>

<style>

</style>
